<template>
    <div>
        <div class="operate">
            <el-button :icon="Edit" type="text" v-show="!editable" @click="editClick" size="small">编辑</el-button>
            <el-button type="text" v-show="editable" @click="saveClick" size="small">保存修改</el-button>
            <el-button type="text" v-show="editable" @click="cancelClick" size="small">取消编辑</el-button>
        </div>
        <div class="node">
            <div class="node-tab">
                <el-table :data="proNodeData" size="small">
                    <el-table-column prop="name" label="流程节点" show-overflow-tooltip>
                        <template #default="s">
                            <el-input v-model="s.row.name" :disabled="!editable"/>
                        </template>
                    </el-table-column>
                    <el-table-column label="是否启用" width="120">
                        <template #default="s">
                            <el-switch v-model="s.row.enabled"
                                       :active-value="1"
                                       :inactive-value="0"
                                       active-text="是"
                                       inactive-text="否"
                                       size="small"
                                       :disabled="!editable"
                            />
                        </template>
                    </el-table-column>
                    <el-table-column label="排序" width="60">
                        <template #default="s">
                            {{s.$index + 1}}
                        </template>
                    </el-table-column>
                    <el-table-column label="审批人员">
                        <template #default="s">
                            <el-select v-model="s.row.positionId" placeholder="无" :disabled="!editable" style="width: 120px" filterable>
                                <el-option v-for="(item) in this.$store.state.positionOptions" :label="item.label" :value="item.value"/>
                            </el-select>
                        </template>
                    </el-table-column>
                    <el-table-column prop="createTime" label="创建时间" show-overflow-tooltip/>
                    <el-table-column label="操作" v-if="editable" width="200">
                        <template #default="s">
                            <el-button :icon="CirclePlus" size="small" type="text" @click="addRowClick">新增</el-button>
                            <el-button :icon="Delete" size="small" type="text" @click="removeRow(s.$index)">删除</el-button>
                            <el-button size="small" type="text" @click="moveUpClick(s.$index)">上移</el-button>
                            <el-button size="small" type="text" @click="moveDownClick(s.$index)">下移</el-button>
<!--                            <el-button size="small" type="text" @click="addRow(s.$index)">上方插入行</el-button>-->
<!--                            <el-button size="small" type="text" @click="addRow(s.$index+1)">下方插入行</el-button>-->
<!--                            <el-button size="small" type="text" :icon="DArrowRight">更多</el-button>-->
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="node-tree">
                <el-steps direction="vertical">
                    <el-step v-for="(item,index) in proNodeData">
                        <template #title>
                            {{ item.name }}
                        </template>
                        <template #description>
                            <div style="color: orange;">
                                审批人员：{{item.positionName }}
                            </div>
                        </template>
                    </el-step>
                </el-steps>
            </div>
        </div>
    </div>
</template>

<script>
import {editProNodes, getProNodesByProId} from "../../../network/sys/processNode";
import {Edit,CirclePlus,Plus,Delete,DArrowRight,Bottom,Top} from '@element-plus/icons-vue'
import {getPositionOptions} from "../../../network/sys/position";
import {getCurrentInstance, reactive, toRefs} from "vue";

export default {
    name: "ProcessNode",
    props: ['processId'],
    setup(props,{emit}){
        const globalProperties = getCurrentInstance()?.appContext.config.globalProperties;
        const initData = {
            resourceRow(){
                return {
                    name: null,
                    positionId: null,
                    enabled: 1,
                    processId: props.processId,
                    sort: null
                }
            }
        }
        const data = reactive({
            editable: false,
            proNodeData: [],
            cacheData: []
        })
        const clickEvent = reactive({
            editClick(){
                data.editable = true;
                data.cacheData = [];//重置缓存
                data.proNodeData.forEach(e=>{data.cacheData.push(globalProperties.$utils.clone(e))});//
                if(data.proNodeData.length===0){data.proNodeData.push(initData.resourceRow());}//当不存在有流程节点的时候，新增一条记录
            },
            saveClick(){
                new Promise((resolve => {
                    data.proNodeData.forEach((e,index)=>{
                        e.id = null;
                        e.sort = index;
                    })
                    resolve();
                })).then(res=>{
                    globalProperties.$operate.confirm({
                        title: '修改流程',
                        hint: '你确定要保存修改吗？',
                        executeFn: ()=>{
                            editProNodes({
                                processId:props.processId,
                                nodes: data.proNodeData
                            }).then(vo=>{
                                globalProperties.$response.handle({
                                    data:vo,
                                    success: '修改成功',
                                    error: '修改失败',
                                    successFn: ()=>{
                                        data.editable = false;
                                        executionFn.loadProcessNodes();
                                    }
                                })
                            })
                        },
                        cancelHint: ()=>{
                        }
                    })
                })
            },
            cancelClick(){
                data.editable = false;
                data.proNodeData = [];
                data.cacheData.forEach(e=>{
                    data.proNodeData.push(globalProperties.$utils.clone(e));
                })
            },
            moveUpClick(index){
                if(index === 0) return;
                let currentRow = data.proNodeData[index];
                data.proNodeData.splice(index,1);
                data.proNodeData.splice(index-1,0,currentRow);
                // console.log('currentRow',currentRow)
            },
            moveDownClick(index){
                if(index === data.proNodeData.length-1) return;
                let currentRow = data.proNodeData[index];
                data.proNodeData.splice(index,1);
                data.proNodeData.splice(index+1,0,currentRow);
                // console.log('currentRow',currentRow)
            },
            addRowClick(){
                data.proNodeData.push(initData.resourceRow());
            },
            removeRow(index){
                data.proNodeData.splice(index,1);
            },
        })
        const executionFn = reactive({
            loadProcessNodes(){
                getProNodesByProId(props.processId).then(vo=>{
                    console.log('流程节点数据：',vo);
                    data.proNodeData = vo.data;
                })
            }
        })
        return{
            ...toRefs(data),
            ...toRefs(executionFn),
            ...toRefs(clickEvent),
            Top, Bottom, Edit, Plus, CirclePlus, Delete, DArrowRight
        }
    },
    data(){
        return{
        }
    },
    methods:{
        loadPositionOptions(){
            getPositionOptions().then(vo=>{
                this.$response.handle({
                    data: vo,
                    successFn: ()=>{
                        this.$store.commit('setPositionOptions',vo.data);
                    },
                    log: '岗位选项信息'
                })
            })
        },
        init(){
            this.loadProcessNodes();
            if(this.$store.state.positionOptions.length===0){
                this.loadPositionOptions();
            }
        }
    },
    created() {
        this.init();
    }
}
</script>

<style scoped>
*{
    /*border: 1px solid red;*/
}
.node{
    display: flex;
    margin-left: 50px;
}
.node-tab{
    width: 860px;
}
.node-tree{
    min-width: 200px;
    margin: 20px 0 0 50px;
}
.operate{
    margin-left: 50px;
    width: 100%;
    height: 32px;
}
.el-select-dropdown__item{
    width: 100%;
}
.el-scrollbar__view{
    width: 120px;
}
</style>